<template>
  <a-collapse
    v-model:activeKey="activeKey"
    :bordered="false"
    style="background: rgb(255, 255, 255); overflow: auto; height: 100%"
  >
    <template #expandIcon="{ isActive }">
      <caret-right-outlined :rotate="isActive ? 90 : 0" />
    </template>
    <a-collapse-panel key="table" header="table" :style="customStyle">
      <a-table />
    </a-collapse-panel>
    <a-collapse-panel key="button" header="button" :style="customStyle">
      <a-space wrap>
        <a-button type="primary">新建文件夹</a-button>
        <a-button>下 载</a-button>
        <a-button type="dashed">Dashed Button</a-button>
        <a-button type="text">Text Button</a-button>
        <a-button type="link">Link Button</a-button>
      </a-space>
    </a-collapse-panel>
    <a-collapse-panel key="tree" header="tree" :style="customStyle">
      <a-tree />
    </a-collapse-panel>
    <a-collapse-panel key="input" header="input" :style="customStyle">
      <a-space direction="vertical">
        <a-input placeholder="Basic usage" />
        <a-input autofocus placeholder="Lazy usage" />
        <input-round />
      </a-space>
    </a-collapse-panel>
    <a-collapse-panel key="select" header="select" :style="customStyle">
      <a-select />
    </a-collapse-panel>
    <a-collapse-panel key="popover" header="popover" :style="customStyle">
      <a-popover placement="bottomRight">
        <template #content>
          <span>Content</span>
        </template>
        <a-button>BR</a-button>
      </a-popover>
    </a-collapse-panel>
    <a-collapse-panel key="drawer" header="drawer" :style="customStyle">
      <a-drawer />
    </a-collapse-panel>
    <a-collapse-panel key="tooltip" header="tooltip" :style="customStyle">
      <a-tooltip>
        <template #title>hover展示全部文字</template>
        XXXXXHRJXX…
      </a-tooltip>
    </a-collapse-panel>
    <a-collapse-panel key="message" header="message" :style="customStyle">
      <a-message />
    </a-collapse-panel>
    <a-collapse-panel key="form" header="form" :style="customStyle">
      <a-form />
    </a-collapse-panel>
    <a-collapse-panel key="modal" header="modal" :style="customStyle">
      <a-modal />
    </a-collapse-panel>
    <a-collapse-panel key="progress" header="progress" :style="customStyle">
      <a-progress />
    </a-collapse-panel>
    <a-collapse-panel key="iconfont" header="iconfont" :style="customStyle">
      <a-space wrap>
        <span style="font-size: 16px">
          <iconfont name="#icon-pingtaiguanli" />
        </span>
        <span style="font-size: 16px">
          <iconfont name="#icon-wenjianjia" />
        </span>
      </a-space>
      <p>
        更多iconfot
        name请查看项目目录下的src\assets\iconfont\demo_index.html(双击浏览,Symbol项)
      </p>
    </a-collapse-panel>
    <a-collapse-panel key="empty" header="empty" :style="customStyle">
      <a-empty :image="notData" />
      <a-empty :image="notPublished" description="暂无发布" />
      <a-empty :image="notSearchResult" description="暂无搜索结果" />
    </a-collapse-panel>
    <a-collapse-panel
      key="confirm-bar"
      header="confirm-bar"
      :style="customStyle"
    >
      <confirm-bar />
    </a-collapse-panel>
    <a-collapse-panel key="card" header="card" :style="customStyle">
      <card>
        <template #title>title</template>
        <template #more>more</template>
        <template #content>contnet</template>
      </card>
    </a-collapse-panel>
  </a-collapse>
</template>
<script setup>
import { CaretRightOutlined } from '@ant-design/icons-vue'
import { ref } from 'vue'
import ATable from './table.vue'
import ATree from './tree.vue'
import ASelect from './select.vue'
import ADrawer from './drawer.vue'
import AMessage from './message.vue'
import AForm from './form.vue'
import AModal from './modal.vue'
import AProgress from './progress.vue'
import iconfont from '@/components/iconfont.vue'
import notData from '@/assets/images/not-data.png'
import notPublished from '@/assets/images/not-published.png'
import notSearchResult from '@/assets/images/not-search-result.png'
import ConfirmBar from './confirm-bar.vue'
import InputRound from '@/components/input-round.vue'

/**
 * 抽屉样式
 */
let activeKey = ref(['table'])
let customStyle =
  'background: #fff;border-radius: 4px;margin-bottom: 24px;border: 0;overflow: hidden'
</script>
